

export let name ="coupon-center";
export function Render(){
    return`
    <style>
    /* 全局样式 */
    :root {
        --primary-color: #ff4400;
        --secondary-color: #e5e5e5a8;
        --text-color: #333;
        --light-text-color: #666;
        --border-color: #e5e5e5;
        --active-color: #ff4400;
        
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    }
    body {
        background-color: #f5f5f5;
        color: var(--text-color);
        -webkit-tap-highlight-color: transparent;
        font-size: 1.6rem; /* 16px */
    }
    .top{
        width:100%;
        height: 6rem;
        padding: 0 2rem;
        font-size: 3rem;
        text-align: center;
        line-height: 6rem;
        
    }
    .left{
        display: flex;
        width: 10rem;
        height: 5rem;
        font-size: 3rem;
        
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        
    }
    .left > div{
        display: flex;
       
        border-radius: 1.5rem ;
        box-shadow: 0 0.3rem .125rem #e5e5e5, 0 .125rem .1875rem .0625rem #e5e5e5;
    }
    .back-off , .menu{
        width: 4rem;
        height: 3rem;
        line-height: 3rem;
        
        text-align: center;
        
    }
   
    .menu{
        border-left:0.2rem solid gray; 
        
    }
    .right{
        font-size: 3rem;
    }
    nav{
        display: flex;
        width: 100%;
        height:5rem ;
        align-items: center;
        box-shadow: 0 0.3rem .125rem #e5e5e5, 0 .125rem .1875rem .0625rem #e5e5e5;
        margin-bottom: 3rem;
    }
    nav div {
        flex: 1;
        font-size: 2.5rem;
        text-align: center;
    }
    .Coupons{
        width: 100%;
        height: 10rem;
        font-size: 4rem;
        
        box-sizing: border-box;
    }
    </style>
    <div class="top">
        <div class="left">
            <div>
                <div class="back-off"><</div>
                <div class="menu">#</div>
            </div>
           
        </div>
        优惠券
        
    </div>
    <nav>
        <div >领券中心</div>
        <div >已领取</div>
        <div >已使用</div>
        <div >已失效</div>
    </nav>
    <div class="content">
        <div class="Coupons">满减劵</div>
    </div>
   
    
    `
}
export function afterRender(){

    //给导航栏绑定点击事件
    let CouponState = document.querySelectorAll("nav div ");
    CouponState.forEach(item => {
        item.addEventListener("touchend", (e) => {
            console.log(e)
            location.hash = "p1" ;
        })
    })
    //给返回按钮绑定点击事件
    let Backofff = document.querySelector(".back-off")
    Backofff.addEventListener("touchend", (e) => {
        location.hash = "#/my" ;
        document.querySelector(".bottomNav").style.display = "block";
    })
}


document.querySelector(".bottomNav").style.display = "none";